<template>
  <div id="app">
    <page-menu></page-menu>
    <div id="loading">
      <div class="item">
        <div class="icons">
          <div class="children"></div>
          <div class="children2"></div>
        </div>
        <div class="title">正在尝试与styz取得神经连接...</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import PageMenu from "@/components/content/index.vue";
import { themePinia } from "./libs/pinia/theme";

onMounted(() => {
  window.addEventListener("resize", () => {
    setTimeout(() => {
      // location.reload();
    }, 250);
  });
});
</script>

<style lang="scss">
#app {
  height: 100%;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }

  // 50% {
  //   transform: scale(1.5) rotate(45deg);
  //   opacity: 0.5;
  // }

  100% {
    transform: scale(3) rotate(45deg);
    opacity: 0;
  }
}

/* 初始化input颜色 */
#loading {
  display: none;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.7);
  backdrop-filter: blur(3px);
  z-index: 999;

  .item {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: #111;

    .icons {
      position: relative;
      width: 36px;
      height: 36px;

      .children {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 36px;
        height: 36px;
        border: 3px solid #fff;
        transform: rotate(45deg);
        animation: zoomInOut 1s infinite;
      }

      .children2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 3px solid #fff;
        transform: rotate(45deg);
        // animation: zoomInOut 1.5s infinite;
      }
    }

    .title {
      margin-left: 5rem;
      color: #fff;
    }
  }
}
</style>
